<template>
	<view>
		<view class="content_wrap" style="margin-top: 20upx;">
			<view class="content row">
				<span>户主姓名</span>
				<!-- <span class="flex_one"></span> -->
				<input type="text" v-model="subName" @input="inputChange" :disabled="isFirst?'disabled':''"
				placeholder="请输入开户人姓名" placeholder-class="phclass"/>
			</view>
		</view>
		
		<view class="content_wrap">
			<view class="content row" style="border-bottom: none;">
				<span>户主身份证号</span>
				<!-- <span class="flex_one"></span> -->
				<input type="text" v-model="subIdentity" @input="inputChange" :disabled="isFirst?'disabled':''"
				placeholder="请输入开户人身份证号" placeholder-class="phclass"/>
			</view>
		</view>
		
		<view class="content_wrap" style="margin-top: 20upx;">
			<view class="content row" style="border-bottom: none;">
				<span>银行卡号</span>
				<!-- <span class="flex_one"></span> -->
				<input type="number" v-model="card" @input="inputChange"
					placeholder="仅支持储蓄卡" placeholder-class="phclass"/>
			</view>
		</view>
		
		<view class="row" @click="goToSupport">
			<image src="../../static/img/bank_head_icon.png" mode="aspectFill" class="head_icon"></image>
			<span class="head_info">我们支持绑定的银行</span>
		</view>
		
		<view class="bottom_btn row_center" @click="addBank">
			<span class="flex_one" :class="{'active': (subName && subIdentity && card)}">下一步</span>
		</view>
		
	</view>
</template>

<script>
	import { BASE_URL,bankQuery,baseinfo } from '@/utils/api'
	
	export default {
		data() {
			return {
				isActive: false,
				identity: '',
				name: '',
				card: '',
				subName: '',
				subIdentity: '',
				tixian: 0,
				isFirst: false
			}
		},
		methods: {
			inputChange(){
				
			},
			async baseinfo(){
				let res = await baseinfo();
				if(res && res.code == 1){
					if(res.data){
						this.name = res.data.realName;
						this.identity = res.data.cardNo;
						
						uni.setStorageSync("name", this.name);
						uni.setStorageSync("identity", this.identity);
						if(this.name){
							this.subName = "*"+this.name.substring(1, this.name.length);
						}else{
							this.name = "";
							this.subName = "";
						};
						
						if(this.identity){
							let length = this.identity.length;
							this.subIdentity = this.identity.substring(0, 6)+"*********"+this.identity.substring(length-6, length);
						}else{
							this.identity = "";
							this.subIdentity = "";
						}
						this.isFirst = true;
					}else{
						this.isFirst = false;
					}
					
				}else{
					this.isFirst = false;
				}
			},
			addBank(){
				if(!this.subName){
					uni.showToast({
						icon: 'none',
						duration:2000,
						title:'请输入户主姓名'
					});
					return;
				};
				if(!this.subIdentity){
					uni.showToast({
						icon: 'none',
						duration:2000,
						title:'请输入户主身份证'
					});
					return;
				};
				
				if(!this.card){
					uni.showToast({
						icon: 'none',
						duration:2000,
						title:'请输入银行卡号'
					});
					return;
				};
				
				this.bankQuery();
				
				
			},
			goToSupport(){
				uni.navigateTo({
					url:'/pages/support_bank/support_bank'
				})
			},
			async bankQuery(){
				let res = await bankQuery(this.card);
				if(res.code == 1){
					console.log(this.subName);
					console.log(this.name);
					if(this.subName.indexOf("*") != -1){
						uni.setStorageSync('name', this.name);
					}else{
						uni.setStorageSync('name', this.subName);
					}
					
					if(this.subIdentity.indexOf("*") != -1){
						uni.setStorageSync('identity', this.identity);
					}else{
						uni.setStorageSync('identity', this.subIdentity);
					}
					
					uni.setStorageSync('card', this.card);
					uni.setStorageSync('bankCode', res.data.bankCode);
					uni.setStorageSync('bankIcon', res.data.bankIcon);
					uni.setStorageSync('bankName', res.data.bankName);
					uni.navigateTo({
						url:'/pages/add_bank_two/add_bank_two?tixian'+this.tixian
					})
				}else{
					uni.showToast({
						icon: 'none',
						duration:2000,
						title:res.message
					})
				}
			}
		},
		onLoad(opt) {
			this.tixian = opt.tixian;
			this.baseinfo();
		}
	}
</script>

<style>
	page{background: #F1F1F1;}
.content_wrap{padding-left: 27upx; background: #FFFFFF; color: #333333; font-size: 32upx;}
.content_wrap .content{height: 100upx; border-bottom: solid 2upx #E6E6E6; padding-right: 30upx;}
.content_wrap .content image{height: 20upx; width: 15upx; margin-right: 5upx;}
.content_wrap .content input{text-align: right;}

.bottom_btn{padding: 0upx 30upx; margin-top: 60upx;}
.bottom_btn span{background: #CCCCCC; color: #FFFFFF; font-size: 32upx; height: 94upx; line-height: 94upx; text-align: center;
	font-weight: bold;border-radius: 12upx;}
.active{background: #FFCA0A!important; color: #333333!important;}
	
.head_icon{width: 30upx; height: 30upx; margin: 22upx 11upx 22upx 30upx;}
.head_info{font-size: 26upx; font-weight: bold;color: #4A65F7;}
input{flex: 1;}
</style>
